<template>
  <a-drawer
    title="分配"
    width="90%"
    :visible="visible"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-card :bordered="false">
      <div>
        <h3>请先选择分组再进行分配</h3>
        分组名称 :
        <a-select allowClear @change="GroupChange" v-model="GroupId" style="width:400px" placeholder="分组名称">
          <a-select-option v-for="item in UserGrouping" :key="item.Id" :value="item.Id">
            {{ item.DicName }}
          </a-select-option>
        </a-select>
        <!-- <a-input v-model="Sort" autocomplete="off" placeholder="分组名称" /> -->
      </div>
      <!-- id="transfer"
        @scroll="scrollFn" -->
      <a-transfer
        style="margin-top: 8px"
        show-search
        :filter-option="filterOption"
        :list-style="{
          width: '640px',
          height: '550px'
        }"
        :data-source="mockData"
        :target-keys="targetKeys"
        :render="item => item.title"
        @change="TargetKeysChange"
      >
      </a-transfer>
    </a-card>
    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button @click="visible = false">取消</a-button>&nbsp;&nbsp;
      <a-button type="primary" :loading="btnLoading" @click="handleSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
export default {
  data() {
    return {
      btnLoading: false,
      allowSelect: '',
      User: [],
      visible: false,
      GroupName: '',
      Sort: '',
      UserGrouping: [],
      entity: {},
      GroupId: '',
      DepartmentIdTreeData: [],
      show: false,
      targetKeys: [],
      mockData: [],
      pagination: {
        current: 1,
        pageSize: 100,
        total: null
      },
      Type: '1',
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      SalesmanType: ''
    }
  },
  mounted() {
    this.$http.post('/Base_Manage/Base_Department/GetTreeDataList', {}).then(resJson => {
      if (resJson.Success) {
        this.DepartmentIdTreeData = resJson.Data
      }
    })
  },
  methods: {
    getUserGrouping() {
      this.$http
        .post('/Base_BasicData/Base_DictionaryMain/GetTheDataByDicKey', {
          Condition: 'DicKey',
          Keyword: 'CustGrouping'
        })
        .then(res => {
          this.UserGrouping = res.Data.DictionaryDetailsList
        })
    },
    scrollFn(direction, event) {
      if (direction == 'left') {
        // 滚动条位置 + 盒子高度 + 距离底部距离 > 滚动条总高     进行加载
        if (event.path[0].scrollTop + event.path[0].clientHeight + 100 > event.path[0].scrollHeight) {
          this.pagination.current++
          this.this.getmockDataList()
        }
      }
    },
    handleSubmit() {
      this.btnLoading = true
      if (!this.GroupId) return this.$message.error('请选择分组')
      // var entityData = {}
      // entityData.SalesmanId = this.allowSelect
      // entityData.CustomerId_List = this.targetKeys
      // entityData.IsFormal = true
      // entityData.SalesmanName = this.SalesmanName
      // entityData.SalesmanType = this.SalesmanType
      this.$http
        .post('/CustomerManagement/CustomerInfo/UpdateDataByCondition', {
          Conditions: [
            {
              Condition: 'GroupId',
              Keyword: this.GroupId
            },
            {
              Condition: 'GroupName',
              Keyword: this.GroupName
            }
          ],
          ids: this.targetKeys
        })
        .then(resJson => {
          this.loading = false
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false
            this.targetKeys = []
          } else {
            this.$message.error(resJson.Msg)
          }
          setTimeout(() => {
            this.btnLoading = false
          }, 500)
        })
    },
    changeType(e) {
      this.pagination = {
        current: 1,
        pageSize: 100,
        total: null
      }
      this.mockData = []
      this.targetKeys = []
      this.getmockDataList()
    },
    GroupChange(e) {
      this.GroupId = e
      var id = this.UserGrouping.findIndex(item => item.Id == e)
      if (id !== -1) {
        this.GroupName = this.UserGrouping[id].DicName
      }

      if (this.GroupId) {
        this.$http
          .post('/CustomerManagement/CustomerInfo/GetDataListByMoreConditionOfFormal', {
            Search: [
              {
                Condition: 'GroupId',
                Keyword: this.GroupId
              }
            ]
          })
          .then(resJson => {
            if (resJson.Success) {
              this.targetKeys = resJson.Data.map(item => {
                return item.Id
              })
            } else {
              this.$message.error(resJson.Msg)
            }
          })
      }
    },

    init() {
      this.pagination = {
        current: 1,
        pageSize: 100,
        total: null
      }
      // 获取组织
      this.GroupId = ''
      this.GroupName = ''
      this.mockData = []
      this.getmockDataList()
      this.btnLoading = false
      this.allowSelect = ''
      this.user = []
      this.targetKeys = []
    },
    openForm() {
      this.init()
      this.visible = true
      this.getUserGrouping()
    },
    Department(e) {
      this.UserList(e)
    },
    UserList(e) {
      this.$http.post('/Base_Manage/Base_User/GetDataListAsyncByDeptId?DeptId=' + e).then(resJson => {
        if (resJson.Success) {
          this.User = resJson.Data
        }
      })
    },
    // 分配
    TargetKeysChange(targetKeys, direction, moveKeys) {
      this.targetKeys = targetKeys
    },
    filterOption(inputValue, option) {
      return option.title.indexOf(inputValue) > -1
    },
    getmockDataList() {
      this.$http
        .post('/CustomerManagement/Cust_CustomerAllocation/CustomerList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          Search: { Condition: 'cCusType', keyword: '2' }
        })
        .then(resJson => {
          if (resJson.Success) {
            let arr = resJson.Data
            this.pagination.total = resJson.Total
            // 获取不到最新数据或已全部加载时停止继续加载
            if (arr.length <= 0 || this.mockData.length >= resJson.Total) {
              return
            }
            arr.forEach(item => {
              let str1 = item.CustomerUserList.filter(item => item.Type == 1)
                .map(im => im.UserName)
                .join(',')
              let str2 = item.CustomerUserList.filter(item => item.Type == 2)
                .map(im => im.UserName)
                .join(',')
              item.title = `${item.CustomerName}__销售经理 (${str1 || '无'}) __市场 (${str2 || '无'}) __${
                item.cCusType == 0 ? '潜在' : '正式'
              }客户`
              item.key = item.Id
            })
            this.mockData = this.mockData.concat(arr)
            // 继续获取数据
            this.pagination.current++
            this.getmockDataList()
          }
        })
    }
  }
}
</script>

<style scoped>
.Mbottom {
  margin-bottom: 8px;
}
.weight {
  font-weight: bold;
}
</style>
